<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>APP文案列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../js/jquery-3.1.0.min.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../js/public.js"></script>

    <style>
        .layui-table-cell {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="demoTable">
    <!--分类名称：
    <div class="layui-inline">
    <input class="layui-input" name="name" id="name" autocomplete="off">
    </div>-->
    使用页面
    <div class="layui-inline">
        <select name="usepage" id="usepage" autocomplete="off" class="layui-input"
                style="width: 120px;padding-left: 5px">
            <option value=""> -- 请选择 --</option>
            <option value="0">首&nbsp;&nbsp;&nbsp;&nbsp;页</option>
            <option value="1"> 详情页</option>
        </select>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
    <button type="button" class="layui-btn" id="addtype"><i class="layui-icon"></i></button>
</div>
<table class="layui-hide" id="types" lay-filter="types"></table>

<script>
    layui.use(['table', 'layer'], function () {
        var table = layui.table;
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //方法级渲染
        table.render({
            elem: '#types'
            , url: '/refuse-web/api/notice/list'
            , minWidth: 80
            , cols: [[
                // {checkbox: true, fixed: true}
                {field: 'id', title: 'ID', align: "center",width:80, sort: true }
                , {field: 'page', title: '使用页面', align: "center",width:100,  templet: '#pageformat'}
                , {field: 'content', title: '文案内容'}
                , {
                    field: 'create_time', title: '创建时间', align: "center", templet: function (row) {
                        var date = row.create_time;
                        if (date == null || date == "") {
                            return "";
                        }
                        return dateFormat('yyyy-MM-dd hh:mm:ss', row.create_time)
                    }
                }
                , {
                    field: 'update_time', title: '修改时间', align: "center", templet: function (row) {
                        var date = row.update_time;
                        if (date == null || date == "") {
                            return "";
                        }
                        return dateFormat('yyyy-MM-dd hh:mm:ss', row.update_time)
                    }
                }
                , {field: 'status', title: '状态', align: "center", templet: '#statusformat'}
                , {align: 'center', title: '操作', toolbar: '#toolBar'}
            ]]
            , id: 'noticeList'
            , page: true
            , lodding: true
        });

        //监听添加按钮
        $(document).on('click', '#addtype', function () {
            layer.open({
                type: 2 //此处以iframe举例
                , title: '新建文案'
                , area: ['600px', '520px']
                , shade: 0
                , maxmin: true
                , content: 'addnotice.html'
                , btn: ['关闭'] //只是为了演示
                , btn: function () {
                    layer.closeAll();
                }
                , zIndex: layer.zIndex //重点1
                , success: function (layero) {
                    layer.setTop(layero); //重点2
                }
            });
        });

        //监听工具条
        table.on('tool(types)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除吗，删除后不可恢复?', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/refuse-web/api/notice/delete',
                        type: 'get',
                        datyaType: "json",
                        data: {'id': data.id},//向服务端发送删除的id
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg("删除成功", {icon: 1, time: 1000}, function () {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                });
                            } else {
                                layer.msg("删除失败", {icon: 5, time: 1000}, function () {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                });
                            }
                            location.reload();
                            layer.close(index);
                        },
                        error: function (msg) {
                            layer.msg("服务器请求失败！", {icon: 5})
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '修改文案'
                    , area: ['600px', '560px']
                    , shade: 0
                    , maxmin: true
                    , content: 'updatenotice.html?id=' + data.id
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var usepage = $('#usepage');
                //执行重载
                table.reload('noticeList', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        usepage: usepage.val()
                    }
                }, 'data');
            },

            setTop: function () {
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '新增垃圾种类'
                    , area: ['250px', '200px']
                    , shade: 0
                    , maxmin: true
                    , content: 'addtype.html'
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
<script type="text/html" id="toolBar">
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <!--<button data-method="setTop" data-type="auto" class="layui-btn layui-btn-xs">编辑</button>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="pageformat">
    {{# if(d.page == 0){ }}
    首页
    {{# }else if(d.page == 1){ }}
    详情页
    {{# }else{ }}
    未配置
    {{# } }}
</script>
<script type="text/html" id="statusformat">
    {{# if(d.status == 1){ }}
    启用
    {{# }else if(d.status == 0){ }}
    停用
    {{# }else{ }}
    未配置
    {{# } }}
</script>
</body>
</html>